<template>
    <!-- html -->
     <div class="app">
        <h1>你好啊！</h1>
     </div>
     <div>
        <ul>
            <!-- <li v-for="item in items" :key="item.id">{{ item.name }}</li> -->
        </ul>
     </div>
</template>

<script>
    // js或ts
    //前后端交互，ajax
    import axios from 'axios';
    export default {
        name:"App", //组件名
        data() {
            return {
                items: []
            };
        },
        mounted() {
            axios.get('http://localhost:8080/vue/test01')
            .then(response => {
                console.log(response.data);
                // this.items = response.data;
            })
            .catch(error => {
                console.error("请求失败",error);
            });
        }
    };
</script>

<style>
    /* 样式 */
    .app{
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
</style>